<template>
	<view>
		<view id="catex_box">
			<view class="top">
				<view class="head_top" :style="'height:'+topBarTop()+'px;'"></view>
				<view class="d-f" style="position: relative;"
					:style="topBarHeight() == 0 ? '': 'height:'+topBarHeight()+'px;'">
					<view class="reg180"
						:style="topBarHeight() == 0 ? '': 'line-height:'+topBarHeight()+'px;'"
						@click="goback">
						<text class="icon iconfont icon-jiantou"></text>
					</view>
					<view class="search-box"
						:style="topBarHeight() == 0 ? '': 'line-height:'+topBarHeight()+'px;'"
						@click.stop="go_search">
						<text class="icon iconfont icon-sousuo"></text>
						<text style="padding-left: 20rpx;">请输入搜索内容</text>
					</view>
				</view>
			</view>
			<view style="position: relative;width: 100%;">
				<!-- <view class="all_btn">
					全部
					<text class="icon iconfont icon-jiantouxia-copy"></text>
				</view> -->
				<view class="cateX">
					<view :class="isActiveIndex1==index?'cate_item active':'cate_item'"
						v-for="(item,index) in list" :key="index" @click="checkCate1(index)">
						<view class="cate_img">
							<image :src="item.image_url" mode="aspectFill"></image>
						</view>
						<view class="cate_text">
							{{item.name}}
						</view>
					</view>
					<view style="width: 88rpx;"></view>
				</view>
			</view>
		</view>

		<view class="cotegory-type cotegory-type-3">
			<view class="category-tab">
				<scroll-view scroll-y="true" class="scroll-Y" :style="'height:'+scrollviewHigh+'px;'">
					<view style="padding-bottom: env(safe-area-inset-bottom);">
						<view :class="isActiveIndex2==index?'left_item active':'left_item'"
							v-for="(item,index) in list[isActiveIndex1].category"
							@click="checkCate2(index)">
							<text>{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="category-content pr">
				<scroll-view scroll-y="true" class="scroll-Y scroll-3"
					:style="'height:'+scrollviewHigh+'px;'">
					<view style="padding-bottom: env(safe-area-inset-bottom);">
						<view class="shop_item" v-for="(item,index) in shopList" :key="index"
							@tap.stop="goShop(item)">
							<view class="shop_logo">
								<image :src="item.logos?item.logos:require('@/static/noimg.png')"
									mode="aspectFill"></image>
							</view>
							<view class="shop_main">
								<view class="name">
									{{item.name}}
								</view>
								<view class="jvli">
									<text class="icon iconfont icon-dizhi1"></text>
									<text>{{item.km.toFixed(2)}}km</text>
								</view>
								<view class="kjj">
									<view class="item" @tap.stop="goPhone(item)">
										<image src="@/static/temp/dianhua.png" mode="aspectFill">
										</image>
										<text>一键拨号</text>
									</view>
									<view class="item" style="padding-left: 20rpx;"
										@tap.stop="goMap(item)">
										<image src="@/static/temp/daohang.png" mode="aspectFill">
										</image>
										<text>一键导航</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				category_id: 0,
				scrollviewHigh: 0,
				list: [],
				isActiveIndex1: 0,
				isActiveIndex2: 0,
				shopList: [],
				FormData: {
					category_id: '',
					sortType: 'all',
					page: 1,
					list_rows: 10,
					lng: '',
					lat: '',
				},
				last_page: 0,
			}
		},
		async onLoad(options) {
			if (options.category_id) {
				this.category_id = options.category_id
			}
			await this.getAdress();
		},
		mounted() {
			this.init();
		},
		onPullDownRefresh() {
			this.FormData.page = 1;
			this.shopList = [];
			this.getShop()
		},
		onReachBottom() {
			if (this.last_page > this.FormData.page) {
				this.FormData.page++;
				this.getShop();
			}
		},
		methods: {
			goback() {
				uni.navigateBack()
			},
			goShop(item) {
				uni.navigateTo({
					url: '/pages/shop/shop?shop_supplier_id=' + item.shop_supplier_id
				})
			},
			goMap(item) {
				uni.openLocation({
					latitude: Number(item.lat),
					longitude: Number(item.lng),
					name: item.address,
					success: function(res) {
						console.log('调用成功：', res)
					},
				})
			},
			goPhone(item) {
				let self = this
				uni.makePhoneCall({
					phoneNumber: item.link_phone
				})
			},
			getAdress() {
				let self = this
				uni.getLocation({
					success(res) {
						self.FormData.lng = res.longitude
						self.FormData.lat = res.latitude
						self.getData()
					},
					fail(err) {
						self.FormData.lng = 116.278632
						self.FormData.lat = 39.87055
						self.getData()
					}
				})
			},
			checkCate1(e) {
				this.isActiveIndex1 = e;
				this.isActiveIndex2 = 0;
				this.FormData.page = 1;
				this.shopList = [];
				this.FormData.category_id = this.list[this.isActiveIndex1].category[this.isActiveIndex2].category_id
				this.getShop()
			},
			checkCate2(e) {
				this.isActiveIndex2 = e;
				this.FormData.page = 1;
				this.shopList = [];
				this.FormData.category_id = this.list[this.isActiveIndex1].category[this.isActiveIndex2].category_id
				this.getShop()
			},
			getShop() {
				let self = this;
				let param = self.FormData
				uni.showLoading({
					title: '加载中'
				})
				self._post('index/supplier', param, function(res) {
					uni.hideLoading()
					uni.stopPullDownRefresh()
					self.shopList = self.shopList.concat(res.data.list.data);
					self.last_page = res.data.list.last_page;
				});
			},
			getData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				})
				self._post('index/supplier_category', {}, function(res) {
					uni.hideLoading()
					self.list = res.data
					if (self.category_id) {
						self.isActiveIndex1 = res.data.findIndex(item => item.category_id == self
							.category_id);
					}
					self.FormData.category_id = res.data[self.isActiveIndex1].category[self
						.isActiveIndex2].category_id
					self.getShop()
				});
			},
			go_search() {
				uni.navigateTo({
					url: '/pages/product/search/search'
				})
			},
			/*初始化*/
			init() {
				let _this = this;
				uni.getSystemInfo({
					success(res) {
						_this.scrollviewHigh = res.windowHeight - _this.topBarTop() - _this
							.topBarHeight();
						// 计算组件的高度
						let view = uni.createSelectorQuery().select('#catex_box');
						view.boundingClientRect(data => {
							_this.scrollviewHigh = _this.scrollviewHigh - data.height;
						}).exec();
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cotegory-type-3 .category-tab {
		width: 200rpx;
		background: #F6F6F6;

		.left_item {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			padding-left: 30rpx;
			font-size: 28rpx;
			box-sizing: border-box;
			color: #666666;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.active {
			color: #1BAE61;
			background-color: #ffffff;
			position: relative;

			&::before {
				content: '';
				width: 3px;
				height: 17px;
				background-color: #1BAE61;
				position: absolute;
				left: 0;
				top: 30rpx;
				bottom: 0;

			}
		}
	}

	.cotegory-type {
		box-sizing: border-box;
		line-height: 40rpx;
		background: #ffffff;
	}

	.cotegory-type-3 {
		display: flex;
	}

	.category-content {
		width: 550rpx;

		.shop_item {
			width: 510rpx;
			height: 200rpx;
			margin: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.2);

			.shop_main {
				width: 100%;
				padding-left: 20rpx;

				.name {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
				}

				.jvli {
					color: #AAAAAA;
					margin-top: 10rpx;
				}

				.kjj {
					margin-top: 10rpx;
					display: flex;
					align-items: center;

					.item {
						display: flex;
						align-items: center;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}

			.shop_logo {
				width: 140rpx;
				height: 140rpx;

				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 16rpx;
				}
			}
		}
	}

	.reg180 {
		padding: 0 20rpx;
		text-align: right;
		transform: rotateY(180deg);
		position: absolute;
		bottom: 0;
	}

	page {
		background: #ffffff;
	}

	.top {
		background-color: #ffffff;
		padding-bottom: 20rpx;
	}

	.search-box {
		width: 420rpx;
		background-color: #F6F6F6;
		border-radius: 8rpx;
		padding-left: 20rpx;
		margin-left: 80rpx;
	}

	.all_btn {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 80rpx;
		padding: 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #333333;
		background-color: #ffffff;
		box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.5);
	}

	.cateX {
		width: 100%;
		padding: 20rpx;
		background: #ffffff;
		display: flex;
		flex-wrap: nowrap;
		overflow: auto;
		scrollbar-width: none;
		box-sizing: border-box;

		&::-webkit-scrollbar {
			display: none;
		}

		.cate_item {
			margin: 0 20rpx;
			width: 180rpx;

			.cate_img {
				width: 90rpx;
				height: 90rpx;
				margin: 0 auto;

				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 12rpx;
				}
			}

			.cate_text {
				text-align: center;
				margin-top: 20rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 40rpx;
				padding: 0 15rpx;
			}

		}

		.active {
			.cate_text {
				color: #ffffff;
				background-color: #1BAE61;
				border-radius: 20rpx;
			}
		}

	}
</style>